<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript" src="js/jquery.js"></script>

<body>
<img id="mytest"/>

<form enctype="multipart/form-data" action="song/upload" method="post">
    <input type="file" name="song">
    歌曲名:<input type="text" name="songName" value="残酷月光">
    歌手名<input id="input_artist" type="text" name="artist" value="林宥嘉">回车模糊搜索已有的艺术家
    <span id="artistId" my = '-1'></span>
<!--    <input type="submit">-->
</form>
<div id="div_artist">

</div>

<div>
    <form method="post" id="myForm">
        账号：<input type="text" name="act">
        密码：<input type="text" name="psw">
        验证码：<input type="text" name="code">
    </form>

    <button style="width: max-content" id="mySubmit">登录</button>
</div>
<div>
    <button id="downFirst">请求下载第一首歌曲</button>
</div>


</body>
<script>
    $(function () {
        $("#input_artist").keyup(function (event) {
            if (event.keyCode === 13) {
                $("#artistId").attr("my","-1");
                sendAjax();
            }
        });
        $("#mySubmit").click(f);
        $("#mytest").click(getCode);
        $("#downFirst").click(downFirst);
        getCode();

        $("#div_artist").on("click","button",function () {
            $("#artistId").attr("my",this.value);

            $("#input_artist").attr("value",$(this).attr("artistName"));

        });

    });

    function downFirst() {
        $.ajax({
            method:"get",
            url:"mic/17.mp3",
            beforeSend:function(jqXHR,options){
                jqXHR.setRequestHeader('token', sessionStorage.getItem('token'));
            },
            success:function (result) {
                if(result.code===1){

                }else{
                    alert(result.msg);
                }
            }
        })
    }

    function sendAjax() {
        var artistName = $("#input_artist").prop("value");
        $.ajax({
            url:"artist/like",
            data:"name="+artistName,
            beforeSend:function(jqXHR,options){
                jqXHR.setRequestHeader('token', sessionStorage.getItem('token'));
                jqXHR.setRequestHeader('Content-Disposition', 'attachment');
            },
            success:function (result) {
                if(result.code===1){
                    var htmlStr = "";
                    $.each(result.data.artists,function (index,item) {
                        htmlStr+="<tr>"
                        // htmlStr+="<td><input type='radio' value='"+item.id+"' artistName = '"+item.name+"'/></td>"
                        htmlStr+="<td>"+item.name+"</td>"
                        // htmlStr+="<td>"+item.startDate+"</td>"
                        // htmlStr+="<td>"+item.endDate+"</td>"
                        // htmlStr+="<td>"+item.owner+"</td>"
                        htmlStr+="<td><button value='"+item.id+"' artistName = '"+item.name+"'>选择</button></td>"

                        htmlStr+="</tr>"
                    });
                    $("#div_artist").html(htmlStr);

                }else{
                    alert(result.msg);
                }
            }
        })
    }

    function getCode() {
        $.ajax({
            url:"/captchaImage",
            method:"GET",
            success:function (result) {
                if(result.code===1){
                    $("#mytest").attr("src","data:image/png;base64,"+result.data.img);
                    console.log(result.data.token);
                    sessionStorage.setItem('token', result.data.token);
                }
            }
        });
    }

    function f() {
        var data = $('#myForm').serialize();
        var token =sessionStorage.getItem('token');
        console.log("token"+sessionStorage.getItem('token'));
        $.ajax({
            url: '/user/login',
            data:data,
            method: 'POST',
            beforeSend:function(jqXHR,options){
                jqXHR.setRequestHeader('token', sessionStorage.getItem('token'));
            },
            success:function (result) {
                if(result.code===1){
                    alert("登录成功，你的token为"+result.data.token);
                    sessionStorage.setItem('token', result.data.token);

                }else if(result.code===0){
                    alert("登录失败，错误原因为："+result.msg);
                }
            }
        });
    }
</script>
</html>